<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文章列表</title>
    <script src="jquery-1.9.1.min.js"></script>
    <script>
        // 当前页码
        var page = 1;

        // 时间格式化
        function datefm(timespan) {
            var date = new Date(timespan);
            // 年份
            var y = date.getFullYear();
            // 月份
            var m = date.getMonth() + 1;
            // 日期
            var d = date.getDate();
            return y + "-" + m + "-" + d;
        }

        // 分页方法
        function mypage(type) {
            if (type == 1) {
                // 点击的是“上一页”
                if (page > 1) {
                    location.href = "list.html?p=" + (page - 1);
                } else {
                    alert("已经在首页了，没有上一页了！");
                }
            } else {
                // 点击的是“下一页”
                location.href = "list.html?p=" + (page + 1);
            }
        }

        jQuery(function () {
            // 1.更新全局的页码信息
            var params = location.search;
            if (params != "") {
                // 不再首页
                page = parseInt(params.split("=")[1]);
            }
            // 方法分页接口查询数据
            jQuery.getJSON("list", {
                "page": page, // 当前页码
                "psize": 3  // 每页显示两条数据
            }, function (data) {
                if (data != null && data.succ == 1) {
                    // 查询成功
                    var html = "";
                    for (var i = 0; i < data.list.length; i++) {
                        // 文章对象的数据
                        var art = data.list[i];
                        html += "<tr>\n" +
                            "    <td>\n" +
                            art.id + "        \n" +
                            "    </td>\n" +
                            "    <td>\n<a href='detail.html?id=" +
                            art.id + "'>" +
                            art.title + "</a>        \n" +
                            "    </td>\n" +
                            "    <td>\n" +
                            art.username + "        \n" +
                            "    </td>\n" +
                            "    <td>\n" +
                            datefm(art.createtime) + "        \n" +
                            "    </td>\n" +
                            "    <td>\n" +
                            art.rcount + "        \n" +
                            "    </td>\n" +
                            "</tr>";
                    }
                    jQuery("#tab").append(html);
                } else {
                    alert("查询失败" + data.msg);
                }
            });
        });
    </script>
</head>
<body>
<div style="margin-left: 100px;margin-top: 30px;text-align: center;">
    <h1>文章列表</h1>
    <table id="tab" style="width: 80%;margin: auto;" border="1">
        <tr>
            <td>
                编号
            </td>
            <td>
                标题
            </td>
            <td>
                作者
            </td>
            <td>
                发布时间
            </td>
            <td>
                阅读量
            </td>
        </tr>
    </table>
    <a href="javascript:mypage(1)"> 上一页</a>
    <a href="javascript:mypage(2)">下一页</a>
</div>
</body>
</html>